<template>
  <section class="store">
    <el-col :span="24" class="action-bar">
			<el-button type="primary" size="medium" @click="newShop">新增店铺</el-button>
    </el-col>

    <!--列表-->
		<el-table :data="shopsList" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60" sortable>
			</el-table-column>
			<el-table-column prop="openLicenseThumb" label="店铺图片" width="150" sortable>
				<template slot-scope="scope">
					<div>
						<img :src="scope.row.Thumb" alt="" style="width:110px;height:110px;object-fit:contain">
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="店铺名称" width="150" sortable>
			</el-table-column>
			<el-table-column prop="created_at" label="创建时间" width="180" sortable>
			</el-table-column>
			<el-table-column prop="level" label="总库存" width="120" sortable>
			</el-table-column>
			<el-table-column prop="unit" label="总销量" width="200" sortable>
			</el-table-column>
			<el-table-column prop="addr" label="成交订单量" width="350" sortable></el-table-column>
			<el-table-column prop="addr" label="总营业额" width="350" sortable></el-table-column>
			<el-table-column prop="addr" label="在售商品" width="350" sortable></el-table-column>
			<el-table-column label="操作" width="150">
				<template slot-scope="scope">
					<div>
						<el-button type="primary" size="mini" @click="editorShop(scope.row.id)">编辑</el-button>
						<el-button type="danger" class="danger-btn" size="mini" @click="deleteShop(scope.row.id)">删除</el-button>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="查看详情" width="100">
				<template slot-scope="scope">
					<div>
						<el-button type="Success" size="mini" @click="showShopDetail(scope.row.id)">查看详情</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code">
				<el-pagination
					background
					:page-size="16"
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="pageChange"
						>
				</el-pagination>
			</div>
    </el-col>


		<!--新增 编辑 商店 -->
		<el-dialog title="店铺" :visible.sync="editFormVisible" @close="initData">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="店铺图片" prop="name">
                    <el-upload
                        class="avatar-uploader"
                        action="https://www.rzkeji.com/api/file/upload-img"
						name="photo"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="memberPicImg" :src="memberPicImg" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
				</el-form-item>
				<el-form-item label="店铺名称">
					<el-input v-model="addForm.shopName" style="width:150px"></el-input>
				</el-form-item>
				<el-form-item label="店铺简介">
					<el-input type="textarea" v-model="addForm.desc" :autosize="{ minRows: 3, maxRows: 5}"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="getShopsInsert" v-if="!editFlag">提交</el-button>
				<el-button type="primary" @click="getShopsUpdate" v-else>提交</el-button>
				
			</div>
		</el-dialog>

        <!--查看详情 -->
		<el-dialog title="店铺" :visible.sync="detailVisible">
			<el-form :model="addForm" label-width="120px" :rules="addFormRules" :label-position="'left'">
				<el-form-item label="店铺图片" >
                    <img  :src="shopInfo.thumb" class="avatar">
				</el-form-item>
				<el-form-item label="店铺名称">
					<div>{{shopInfo.name}}</div>
				</el-form-item>
                <el-form-item label="创建时间">
					<div>{{shopInfo.created_at}}</div>
				</el-form-item>
                <el-form-item label="总库存">
					<div>1111123</div>
				</el-form-item>
                <el-form-item label="总销量">
					<div>1111123</div>
				</el-form-item>
                <el-form-item label="成交订单量">
					<div>1111123</div>
				</el-form-item>
                 <el-form-item label="成交订单量">
					<div>1111123</div>
				</el-form-item>
                 <el-form-item label="总营业额">
					<div>1111123</div>
				</el-form-item>
                <el-form-item label="在售商品">
					<div>1111123</div>
				</el-form-item>
				<el-form-item label="店铺简介">
					<div>{{shopInfo.desc}}</div>
				</el-form-item>
			</el-form>
		</el-dialog>
  </section>
</template>

<script>
export default {
	data(){
		return {
			editFlag:'',
			memberPicImg:'',//商店的图片
			memberPicId:'',//商店的图片id
			ShopList: [],
			detailVisible: false,//详情界面是否显示
			editFormVisible: false,//新增界面是否显示
			addLoading: false,
			addFormRules: {
				name: [
					{ required: true, message: '请输入姓名', trigger: 'blur' }
				]
			},
			imgPrevState:'',
			imageUrl:'',//商店图片
			//新增界面数据
			shopInfo:'',//店铺的总信息
			addForm: {
				shopName:'',
				desc:''
			},
			shopsList:[],
			shopId:'',
			page: 1,
			totalPage:0
		}
	},
	mounted(){
		this.getShopsList();
	},
	methods:{
		beforeAvatarUpload(file) {
			//上传照片前的操作
			console.log(file,555)
        },
        handleAvatarSuccess(res, file) {
			//上传照片成功
			if(res.data){
				this.memberPicImg=res.data.img_url;
				this.memberPicId=res.data.id;
			}
		},
		prevImg(url){
			this.dialogImageUrl=url;
			this.prevImgVisible=true;
		},
		//获取商品列表
		async getShopsList(){
			//获取商店列表
			const res=await this.$api.getShopsList({
				page:this.page,
			})
			if(res.data.level=='success'){
				this.shopsList=res.data.data.shops_list;
				this.totalPage=res.data.data.total
			}
		},
		async getShopsDetail(id){
			//获取商铺详情
			const res=await this.$api.getShopsDetail({
				id
			})
			if(res.data.level=='success'){
				const data=res.data.data.shops_info;
				this.shopInfo=data;
				this.addForm.shopName=data.name;
				this.addForm.desc=data.desc;
				this.memberPicImg=data.thumb;
				this.memberPicId=data.thumb_id
			}
		},
		pageChange(e){
			//翻页
			this.page=e;
			this.getShopsList()
		},
		newShop(){
			//显示新建商铺
			this.editFormVisible=true;
			this.editFlag=false;
		},
		editorShop(id){
			//显示编辑商铺
			this.shopId=id;
			this.editFormVisible=true;
			this.editFlag=true;
			this.getShopsDetail(id);
		},
		async deleteShop(id){
			//删除店铺
			const judge= this.$confirm('删除该店铺?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					const res=await this.$api.getShopsDelete({id});
					if(res.data.level=='success'){
						this.getShopsList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
				}).catch(() => {
          
			});
		},
		async getShopsInsert(){
			//新增店铺
			const res=await this.$api.getShopsInsert({
				name:this.addForm.shopName,
				memberPicId:this.memberPicId,
				desc:this.addForm.desc
			})
			if(res.data.level=='success'){
					this.getShopsList();
					this.$message({
						type: 'success',
						message: res.data.message
					});
					this.editFormVisible=false;
				}else{
					this.$message({
						type: 'error',
						message: res.data.message
					});
				}
		},
		async getShopsUpdate(){
			//编辑店铺
			const res=await this.$api.getShopsUpdate({
				name:this.addForm.shopName,
				memberPicId:this.memberPicId,
				desc:this.addForm.desc,
				id:this.shopId
			})
			if(res.data.level=='success'){
				this.getShopsList();
				this.$message({
					type: 'success',
					message: res.data.message
				});
				this.editFormVisible=false;
			}else{
				this.$message({
					type: 'error',
					message: res.data.message
				});
			}
		},
		showShopDetail(id){
			//查看详情
			this.detailVisible = true;
			this.getShopsDetail(id)
		},
		initData(){
			this.addForm.shopName='';
			this.addForm.desc='';
			this.memberPicImg='';
			this.memberPicId='';
		}
	}
}
</script>
<style lang='scss' scoped>
  .store{
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
            margin: 10px 0px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            padding-left: 20px;
            .action-bar-input{
                width: 250px;
                margin-right: 14px;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
            background: #f2f2f2;
            padding: 8px;
            margin: 10px 0px;
            box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
            border: 1px dashed #d9d9d9;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
            object-fit: contain;
        }     
  }
</style>

<style>
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

	.store .el-dialog__body{overflow: auto;}
</style>
